<script setup lang="ts">
import type { Image } from '~/types'
import type { ProductParam } from '~/types/product'
import { getProductsDetail } from '~/service/products'

const { locale } = useLocale()

// definePageMeta({
//   title: t('products.detail'),
// })

function scrollIntoView(el: HTMLElement | null) {
  el?.scrollIntoView({ behavior: 'smooth' })
}

const router = useRouter()
const route = useRoute('product-id')
const { resolveImgURL } = useGlobalStore()

useHeader('light')
const { $refreshAos } = useNuxtApp() as any

const briefRef = ref<HTMLElement | null>(null)
const usageRef = ref<HTMLElement | null>(null)
const projectRef = ref<HTMLElement | null>(null)
const tabKey = ref('introduction')
watch(tabKey, (n) => {
  if (n === 'introduction' && briefRef.value)
    scrollIntoView(briefRef.value)
  if (n === 'usage' && usageRef.value)
    scrollIntoView(usageRef.value)
  if (n === 'project' && projectRef.value)
    scrollIntoView(projectRef.value)
})

useIntersectionObserver(briefRef, ([ins]) => {
  if (ins?.isIntersecting)
    tabKey.value = 'introduction'
})

const data = ref<any>(null)

// onMounted(async () => {
//   data.value = await getProductsDetail({ id: route.params.id })
//   nextTick(() => {
//     $refreshAos?.()
//   })
//   useHead({
//     title: `${data.value?.name}-超益钢业`,
//   })
// })
const { data: detailData } = await useAsyncData(async () => await getProductsDetail({ id: route.params.id }))
data.value = detailData.value
const paramsList = computed(() => safeJSONParse(get(data.value, 'params', locale.value), []) as ProductParam[])
const imageList = computed(() => ((safeJSONParse(data.value?.img_list, [])) as Image[]).map((item, index) => ({ ...item, index })))
const tags = computed(() => get(data.value, 'tag', locale.value)?.split?.(',') || [])

const projectImgs = computed(() => (safeJSONParse(data.value?.projects?.[0]?.img_list, [])) as Image[])
nextTick(() => {
  $refreshAos?.()
})
useHead({
  title: `${data.value?.name}-超益钢业`,
})
</script>

<template>
  <div>
    <div h="[var(--header-height)] max-md:[50px]" bg="#fff"></div>
    <div bg="#F5F5F5" relative>
      <Breadcrumbs :items="[{ name: $t('products.title'), path: '/product' }, { name: data?.name }]" />

      <div data-aos="fade-left" class="mb-[40px] flex justify-center max-md:flex-col">
        <div m="r-[48px]" max-md:hidden>
          <SwiperImages navigator-position="side" :images="imageList" :thumbnail-count="5" preview-width="464px" preview-height="464px" />
        </div>
        <div hidden max-md:block>
          <SwiperImages :navigator="false" :images="imageList" :thumbnail-count="5" preview-width="100%" preview-height="232px" />
        </div>

        <div class="max-w-[588px] max-md:max-w-unset" p="max-md:x-[var(--padding-x-wrap-md)]" m="max-md:t-[12px]" h="full max-md:auto">
          <h1 m="b-[20px]" text="[32px] max-md:[18px]" font="">
            {{ get(data, 'name', locale) }}
          </h1>
          <p text="[18px] max-md:14px [#44444499] wrap" leading="[32px] max-md:[20px]">
            {{ get(data, 'desc', locale) }}
          </p>

          <div class="divider" />

          <h5 class="sub-title">
            {{ $t('products.tag') }}
          </h5>
          <ul class="flex items-center">
            <li v-for="tag in tags" :key="tag" class="tag">
              {{ tag }}
            </li>
          </ul>

          <template v-if="paramsList.length > 0">
            <div class="divider" />
            <h5 class="sub-title">
              {{ $t('products.parameter') }}
            </h5>
            <div class="bg-[#fff] px-[12px] py-[2px]">
              <ul v-for="param in paramsList" :key="param.key" class="row">
                <li class="opacity-80" text="[var(--color-text-secondary)]">
                  {{ param.paramKey }}
                </li>
                <li text="[var(--color-text-secondary)]">
                  {{ param.paramValue }}
                </li>
              </ul>
            </div>
          </template>
        </div>
      </div>

      <div bg="[#fff]" p="b-[145px] t-[24px] x-[70px] max-md:x-[var(--padding-x-wrap-md)]">
        <el-tabs v-model="tabKey" class="mb-[40px] max-md:mb-[12px]">
          <el-tab-pane name="introduction" :label="$t('products.brief')" />
          <el-tab-pane name="usage" :label="$t('products.usage')" />
          <el-tab-pane v-if="data?.projects?.length > 0" name="project" :label="$t('products.project')" />
        </el-tabs>

        <main v-show="data" class="mx-auto w-[1100px] flex flex-col max-md:w-full">
          <section ref="briefRef" data-aos="fade-up" m="b-[60px]" leading="[40px]">
            <h2 text="[28px] max-md:[18px]" leading="[40px] max-md:[28px]" m="b-[40px] max-md:b-[8px]" font="medium">
              {{ $t('products.brief') }}
            </h2>
            <!-- eslint-disable-next-line vue/no-restricted-v-bind -->
            <div text="[20px] max-md:[14px] [#5F6464] 2xl:[14px]" leading="[40px] max-md:[24px]" v-html="replaceImgUrl(get(data, 'introduction', locale))">
            </div>
          </section>

          <section ref="usageRef" data-aos="fade-up" m="b-[60px]" leading="[40px]">
            <h2 text="[28px] max-md:[18px]" leading="[40px] max-md:[28px]" m="b-[40px] max-md:b-[8px]" font="medium">
              {{ $t('products.usage') }}
            </h2>
            <!-- eslint-disable-next-line vue/no-restricted-v-bind -->
            <div text="[20px] max-md:[14px] [#5F6464]" leading="[40px] max-md:[24px]" v-html="replaceImgUrl(get(data, 'usage', locale))">
            </div>
          </section>

          <section v-if="data?.projects?.length > 0" ref="projectRef" m="b-[60px]" leading="[40px]">
            <h2 text="[28px] max-md:[18px]" leading="[40px] max-md:[28px]" m="b-[40px] max-md:b-[8px]" font="medium">
              {{ $t('products.project') }}
            </h2>
            <!-- eslint-disable-next-line vue/no-restricted-v-bind -->
            <ul text="[20px] max-md:[12px] [#5F6464]">
              <li
                v-for="project in data?.projects"
                :key="project.id"
                w="[1101px] max-md:full" h="[620px] max-md:[210px]" relative
                class="after:absolute after:bottom-0 after:left-0 after:right-0 after:top-0 after:z-[1] after:bg-black after:opacity-30 after:content-['']"
                :style="{ backgroundImage: `url(${resolveImgURL(projectImgs?.[0]?.url)})`, backgroundRepeat: 'no-repeat', backgroundSize: 'cover' }"
                @click="router.push(`/project/${project.id}`)"
              >
                <div z="3" absolute left="[22px] max-md:[12px]" bottom="[20px] max-md:[12px]" p="[20px]" text="[#fff]">
                  <h2
                    relative m="b-[32px] max-md:b-[16px]" p="b-[15px] max-md:b-[8px]" text="[24px] max-md:[18px]" leading="[32px] max-md:[24px]"
                    class="after:absolute after:bottom-0 after:left-0 after:block after:h-[3px] after:w-[27px] after:bg-[var(--primary-color)] after:content-[''] max-md:after:h-[3px] max-md:after:w-[14px]"
                  >
                    {{ get(project, 'name', locale) }}
                  </h2>
                  <p v-if="project.address" m="b-[32px] max-md:b-[16px]" text="[16px] max-md:[12px]" leading="[26px]">
                    {{ get(project, 'address', locale) }}
                  </p>
                  <p v-if="project.desc" m="b-[32px] max-md:b-[16px]" text="[16px] max-md:[12px]" leading="[26px]">
                    {{ get(project, 'desc', locale) }}
                  </p>
                  <p flex="~" class="items-center">
                    <NuxtLink :to="`/project/${project.id}`" m="r-[12px]">
                      {{ $t('link.learn_more') }}
                    </NuxtLink>
                    <img max-md:hidden src="~/assets/img/icon_arrow_right.png" class="h-[20px] w-[20px]" />
                  </p>
                </div>
              </li>
            </ul>
          </section>
        </main>
      </div>
    </div>
  </div>
</template>

<style scoped lang="postcss">
.row {
  @apply flex;
}
.row > li {
  @apply flex-1 p-[4px] text-[14px] leading-[32px];
}
.row + .row {
  border-top: 1px solid #1f1f1f0f;
}
.divider {
  height: 1px;
  margin: 20px 0;
  background: rgba(31, 31, 31, 0.06);
  @apply my-[20px] max-md:my-[12px];
}
.tag {
  color: var(--color-text-secondary);
  background-color: #fff;
  @apply px-[12px] py-[4px] text-[16px] max-md:text-[12px];
}
.tag + .tag {
  @apply ml-[8px] max-md:ml-[8px];
}
.sub-title {
  @apply mb-[20px] max-md:mb-[12px] text-[#444444cc] text-[18px] max-md:text-[16px] leading-[32px] max-md:leading-[24px];
}
</style>
